import React, { useMemo, useState } from 'react';
import { Input } from 'antd';
import { EditOutlined } from '@ant-design/icons'
import { INodeComponent } from './type';
import { NodeDefinedModal } from './NodeDefinedModal'

export const NodeUserDefined: React.FC<INodeComponent> = (props) => {

    const [visible, setVisible] = useState<boolean>(false)

    const data = useMemo(() => {
        return props?.data
    }, [props?.data])


    const onOpen = () => setVisible(true)
    const onClose = () => setVisible(false);

    const onFormChange = (value: any) => {
        if (value && props?.onChange) {
            props.onChange(value)
        }
    }
    return (
        <>
            <Input
                readOnly
                placeholder={`请填写${data.labelName}`}
                title={`请填写${data.labelName}`}
                addonAfter={<EditOutlined onClick={onOpen} />}
                value={props?.value ? JSON.stringify(props.value) : ''}
            />

            {
                visible && (
                    <NodeDefinedModal
                        onClose={onClose}
                        title={data?.labelName}
                        onFormChange={onFormChange}
                        defaultValue={props?.value}
                    />
                )
            }
        </>
    )
}

